<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 1200px;
            margin: auto;
        }

        input {
            padding: 15px;
        }

        button {
            padding: 15px;
        }

        th {
            width: 250px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid lightgray;
        }

        td {
            width: 250px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid lightgray;
        }

        table {
            margin-top: 15px;
        }

        .bian1 {
            background: lightgray;
        }

        .bian2 {
            background: darkgray;
        }

        .aa {
            background: lightgray;
        }

        .bg-red {
            background: red;
        }

        input[type='checkbox'] {
            transform: scale(2);
        }

        .bg-gray {
            background: lightsteelblue;
        }

        .bg-darkgray {
            background: darkgray;
        }

        .bg-green {
            background: green;
        }

        .remove-animation {
            transform: translateX(-1000%);
            transition: 1.3s;
        }
    </style>
</head>

<body>




    <br><br><br>


    <h1>edit  功能没有做完...</h1>

    <table cellpadding="0" cellspacing="0" id="list_box">
        <thead class="bian1">
            <th> <input type="checkbox" onclick="select_all(this)"> 全选</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>操作</th>
        </thead>
    </table>

    <button onclick="delete_selected()"
        style="background-color: red; cursor: pointer;   margin: 12px;  font-size: 23px;">delete selected</button>



      <!-- <input type="text" value="123"   autofocus > -->
       



</body>
<script>
    // 检查 checkbox 是否选中:
    // 如果选中, 那么背景颜色变成绿色
    function is_check_box_selected() {
        let td_list = document.getElementsByTagName("td");
        for (let i = 0; i < td_list.length; i++) {
            if (td_list[i].childNodes[0].nodeName == "INPUT") {   // 判断是否是 input 框
                if (td_list[i].childNodes[0].checked == true) {
                    td_list[i].parentNode.classList.add('bg-green')
                }
                if (td_list[i].childNodes[0].checked == false) {
                    td_list[i].parentNode.classList.remove('bg-green')
                }
            }
        }
    }


    // 创建 html 代码模板
    function createNode(name, age, hobby) {
        let html = `     <td class=" "><input type="checkbox"  onclick="check_this_box(this)"></td>  
                         <td class=" "  ondblclick="double_click(this)"   >${name}</td> 
                         <td class=" "  ondblclick="double_click(this)" >${age}</td>
                         <td class=" "  ondblclick="double_click(this)" >${hobby}</td>
                         <td><button  onclick="delete_button(this)">delete</button>  <button onclick="edit_button(this)" >edit</button></td>     `;
        let placeholder = document.createElement('tr');
        placeholder.classList.add("tr-body")
        placeholder.classList.add("bg-gray")
        placeholder.innerHTML = html;
        return placeholder;
    }


    // 批量添加子元素
    const container = document.getElementById('list_box');
    container.appendChild(createNode('jack', 11, 'games'));
    container.appendChild(createNode('tome', 22, 'ball'));
    container.appendChild(createNode('cill', 33, 'code'));
    container.appendChild(createNode('cill', 44, 'code'));
    container.appendChild(createNode('cill', 55, 'code'));
    container.appendChild(createNode('cill', 66, 'code'));
    container.appendChild(createNode('cill', 77, 'code'));
    container.appendChild(createNode('cill', 88, 'code'));
    container.appendChild(createNode('cill', 99, 'code'));


    // 将点击的那个区域, 背景颜色换成深灰色
    let td_list = document.getElementsByTagName("td");
    for (let i = 0; i < td_list.length; i++) {
        td_list[i].onclick = function () {
            clean_all_class()
            console.log('=============================');
            console.log(this);
            console.log(this.childNodes);
            console.log(this.childNodes[0].nodeName == "BUTTON");
            console.log(this.childNodes[0].nodeName == "INPUT");
            console.log(this.innerText);     // 获取点击的这个元素
            console.log('=============================');
            this.classList.add("bg-darkgray")
            // this.innerText = '=========='
        }
    }

    // 清除所有的 class 
    function clean_all_class() {
        let td_list = document.getElementsByTagName("td");
        for (let i = 0; i < td_list.length; i++) {
            td_list[i].classList.remove("bg-darkgray")
        }
    }



    function edit_button() {
        alert('双击单元格修改内容')        
    }

    // 删除按钮触发事件:
    function delete_button(eee) {
        console.log(eee.innerText);
        eee.parentNode.parentNode.classList.add("remove-animation");   // 删除前, 先做个向左移动的动画 
        setTimeout(function () {
            eee.parentNode.parentNode.remove();
        }, 800)                            // 等动画执行完毕之后, 再去移除节点
    }

    function double_click(eee){
        console.log("双击了这个选项 :     "+eee.innerText);
        eee.innerHTML = `   <input type="text" value="${eee.innerText}" onblur="edit_content(this)"  >     `    // autofocus 自动聚焦
    }
    // 修改点击的这个内容
    function edit_content(eee){
        let temp = eee.value;    // 先将内容缓存起来
        eee.parentNode.innerHTML =  `    <td class=" "  ondblclick="double_click(this)" >${temp}</td>   `                         // 将 input 框变回去
    }


    // 注意: 
    // 这里删除不能使用 常规的 循环遍历删除, 
    // 原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了
    // 因此，删除多个节点时，要注意children属性时刻都在变化。
    // 可以使用 从下到上 的方式删除, 这样索引就不会发生变化
    function delete_selected() {
        let td_list = document.getElementsByTagName("td");
        for (let i = td_list.length - 1; i > -1; i--) {
            console.log(i);
            if (td_list[i].childNodes[0].nodeName == "INPUT") {   // 判断是否是 input 框
                if (td_list[i].childNodes[0].checked) {
                    console.log(td_list[i].childNodes[0].nodeName);
                    console.log(td_list[i].parentNode);
                    console.log(i);
                    // console.log(td_list[i]);
                    td_list[i].parentNode.classList.add('remove-animation')  // 删除前, 先做个向左移动的动画
                    setTimeout(function () {
                        td_list[i].parentNode.remove();
                    }, 800)                                 // 1.3 秒以后再删除节点, 等动画执行完毕
                }
            }
        }
    }


    // 全选按钮点击, 触发事件
    function select_all(eee) {
        let td_list = document.getElementsByTagName("td");
        for (let i = 0; i < td_list.length; i++) {
            console.log(i);
            if (td_list[i].childNodes[0].nodeName == "INPUT") {   // 判断是否是 input 框
                td_list[i].childNodes[0].checked = eee.checked;     // 如果全选按钮选中了, 那么全部的 checkbox 都要选中
            }
        }
        is_check_box_selected();
    }


    // 单选按钮触发事件
    function check_this_box(eee) {
        is_check_box_selected()
    }


</script>

</html>